<div class="project-edition-wrap">
  <ul nz-menu nzMode="inline" class="edition-lf mine-scrollbar-wrapper">
    <ng-container *ngFor="let menu of menuLists; let index = index;">
      <li nz-menu-item [nzSelected]="selectedIndex == index" (click)="menuChange(menu, index)">
        {{ menu.name }}
      </li>
    </ng-container>
  </ul>

  <div class="edition-rt mine-scrollbar-wrapper m-l-10">
    <nz-card>
      <div class="common-search-wrap">
        <div class="common-search-forms">
          <div class="common-form-item">
            <label class="common-search-label">ID</label>
            <div class="common-search-conrol">
              <input nz-input placeholder="请输入ID" [(ngModel)]="searchParams.id" />
            </div>
          </div>
    
          <div class="common-form-item">
            <label class="common-search-label">版本名称</label>
            <div class="common-search-conrol">
              <input nz-input placeholder="请输入版本名称" [(ngModel)]="searchParams.versionName" />
            </div>
          </div>

          <div class="common-form-item">
            <label class="common-search-label">版本号</label>
            <div class="common-search-conrol">
              <input nz-input placeholder="请输入版本号" [(ngModel)]="searchParams.versionId" />
            </div>
          </div>
    
          <div class="common-form-item" [hidden]="!isCollapse">
            <label class="common-search-label">强制更新</label>
            <div class="common-search-conrol">
              <nz-select nzShowSearch nzAllowClear nzPlaceHolder="全部" [(ngModel)]="searchParams.updateFlag" (ngModelChange)="updateChange($event)">
                <nz-option nzLabel="否" nzValue="0"></nz-option>
                <nz-option nzLabel="是" nzValue="1"></nz-option>
              </nz-select>
            </div>
          </div>
    
          <div class="common-form-item" [hidden]="!isCollapse">
            <label class="common-search-label">备注</label>
            <div class="common-search-conrol">
              <input nz-input placeholder="请输入备注" [(ngModel)]="searchParams.note" />
            </div>
          </div>
    
          <div class="common-form-item" [hidden]="!isCollapse">
            <label class="common-search-label">更新详情</label>
            <div class="common-search-conrol">
              <input nz-input placeholder="请输入更新详情" [(ngModel)]="searchParams.updateDetail" />
            </div>
          </div>
    
          <div class="common-form-item" [hidden]="!isCollapse">
            <label class="common-search-label">更新时间</label>
            <div class="common-search-conrol">
              <nz-range-picker [(ngModel)]="updateDates" (ngModelChange)="dateChange($event)"></nz-range-picker>
            </div>
          </div>
    
          <div class="common-form-item">
            <div class="common-search-conrol">
              <button nz-button nzType="primary" class="m-r-8" [nzLoading]="tableParams.tableLoading" (click)="searchData()">查询</button>
              <button nz-button nzType="default" (click)="resetData()">重置</button>
              <button nz-button nzType="link" (click)="isCollapse = !isCollapse">
                {{ isCollapse ? '收起' : '展开' }}<i nz-icon [nzType]="isCollapse ? 'up' : 'down'" nzTheme="outline"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </nz-card>

    <nz-card class="m-t-2">
      <div class="operation-wrap p-b-15">
        <button nz-button nzType="primary" (click)="showEditModal(0)">
          <i nz-icon nzType="plus" nzTheme="outline"></i>新增
        </button>
      </div>
    
      <div class="pagination-wrap-position table-wrap">
        <nz-table
          #basicTable
          nzSize="small"
          nzShowSizeChanger
          nzShowQuickJumper
          nzOuterBordered
          [nzScroll]="{ x: '1100px' }"
          [nzFrontPagination]="false"
          [nzLoadingDelay]="100"
          [nzLoading]="tableParams.tableLoading"
          [nzData]="tableData"
          [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
          [nzTotal]="tableParams.total"
          [nzPageIndex]="tableParams.page"
          [nzPageSize]="tableParams.pageSize"
          [nzShowTotal]="totalTemplate"
          (nzPageIndexChange)="onPageIndexChange($event)"
          (nzPageSizeChange)="onPageSizeChange($event)"
        >
          <thead>
            <tr>
              <th nzAlign="center" nzWidth="110px" nzLeft>编号</th>
              <th nzAlign="center" nzWidth="220px">项目</th>
              <th nzAlign="center" nzWidth="160px">版本名称</th>
              <th nzAlign="center" nzWidth="160px">版本号</th>
              <th nzAlign="center" nzWidth="120px">强制更新</th>
              <th nzAlign="center" nzWidth="120px">应用包</th>
              <th nzAlign="center" nzWidth="120px">应用包大小</th>
              <th nzAlign="center" nzWidth="120px">plist文件</th>
              <th nzAlign="center" nzWidth="220px">备注</th>
              <th nzAlign="center" nzWidth="250px">更新详情</th>
              <th nzAlign="center" nzWidth="160px">更新时间</th>
              <th nzAlign="center" nzWidth="150px" nzRight>操作</th>
            </tr>
          </thead>
    
          <tbody>
            <tr *ngFor="let data of basicTable.data; let index = index;">
              <!-- 编号 -->
              <td nzAlign="center" nzLeft>{{ data.id }}</td>
              <!-- 项目 -->
              <td nzAlign="center">{{ data.projectName || '-' }}</td>
              <!-- 版本名称 -->
              <td nzAlign="center">{{ data.versionName || '-' }}</td>
              <!-- 版本号 -->
              <td nzAlign="center">{{ data.versionId || '-' }}</td>
              <!-- 强制更新 -->
              <td nzAlign="center">
                <span [ngStyle]="{'color': data.updateFlag == 0 ? '#ff4d4f' : data.updateFlag == 1 ? '#52c41a' : '#606266'}">
                  {{ data.updateFlag == 0 ? '否' : data.updateFlag == 1 ? '是' : '未知' }}
                </span>
              </td>
              <!-- 应用包 -->
              <td nzAlign="center">
                <a nz-button nzType="link" [disabled]="!data.appUrl" [href]="data.appUrl">点击下载</a>
              </td>
              <!-- 应用包大小 -->
              <td nzAlign="center">
                {{ (data.packageSize || data.packageSize == 0) ? calculationPackage(data.packageSize) : '-' }}
              </td>
              <!-- plist文件 -->
              <td nzAlign="center">
                <a nz-button nzType="link" [disabled]="!data.plist" [href]="data.plist">点击下载</a>
              </td>
              <!-- 备注 -->
              <td nzAlign="center">{{ data.note || '-' }}</td>
              <!-- 更新详情 -->
              <td nzAlign="center" nzEllipsis>
                <span [title]="data.updateDetail || '-'">
                  {{ data.updateDetail || '-' }}
                </span>
              </td>
              <!-- 更新时间 -->
              <td nzAlign="center">{{ data.updateTime || '-' }}</td>
              <!-- 操作 -->
              <td nzAlign="center" nzRight>
                <button nz-button nzType="link" (click)="showEditModal(1, data)">编辑</button>
                <a
                  nz-button
                  nzType="link"
                  nzDanger
                  nz-popconfirm
                  nzPopconfirmTitle="确认删除?"
                  (nzOnConfirm)="deleteItem(data)"
                >
                  删除
                </a>
              </td>
            </tr>
          </tbody>
        </nz-table>
    
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ tableParams.total }} 条</ng-template>
      </div>
    </nz-card>
  </div>
</div>

<!-- S 新增 | 编辑 -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isModifyVisible"
  [nzTitle]="modalType == 0 ? '新增' : '编辑'"
  (nzOnCancel)="handleCancel()">

  <div *nzModalContent>
    <div class="custom-model-body">
      <!-- S body -->
      <form nz-form nzLayout="vertical" [formGroup]="validateForm">
        <nz-form-item>
          <nz-form-label>版本名称:</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="请输入版本名称" formControlName="versionName" />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label>项目名称:</nz-form-label>
          <nz-form-control>
            <nz-select nzShowSearch nzPlaceHolder="请选择项目名称" formControlName="projectName" (ngModelChange)="projectChange($event)">
              <ng-container *ngFor="let item of menuLists">
                <nz-option *ngIf="item.name != '项目版本'" [nzLabel]="item.name" [nzValue]="item.name"></nz-option>
              </ng-container>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label nzRequired>版本号:</nz-form-label>
          <nz-form-control nzErrorTip="请输入版本号!">
            <input formControlName="versionId" nz-input placeholder="请输入版本号" />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label>强制更新:</nz-form-label>
          <nz-form-control>
            <nz-select nzShowSearch nzPlaceHolder="请选择强制更新" formControlName="updateFlag">
              <nz-option nzLabel="否" nzValue="0"></nz-option>
              <nz-option nzLabel="是" nzValue="1"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label>应用包:</nz-form-label>
          <nz-form-control>
            <nz-upload
              class="upload-img-box"
              nzAction=""
              (nzChange)="onModalPreview($event)"
              [nzShowUploadList]="false"
              [nzDisabled]="uploadLoading">
              <div ngDefaultControl>
                <button nz-button nzType="primary" [nzLoading]="uploadLoading">
                  <i class="upload-icon" nz-icon nzType="upload"></i>
                  {{ uploadLoading ? '文件上传中...' : '请选择文件'}}
                </button>
              </div>
            </nz-upload>
            <div class="package-li" *ngIf="validateForm.value.appUrl">
              <span>
                <i nz-icon nzType="link" nzTheme="outline" class="m-r-5"></i>
                {{ interceptStr(validateForm.value.appUrl) }}
              </span>
              <i nz-icon nzType="delete" nzTheme="outline" title="删除" class="delte-icon" (click)="deletePackage()"></i>
            </div>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label>备注:</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="请输入备注" formControlName="note" />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label>更新详情:</nz-form-label>
          <nz-form-control>
            <nz-textarea-count [nzMaxCharacterCount]="200">
              <textarea rows="4" maxlength="200" nz-input formControlName="updateDetail"></textarea>
            </nz-textarea-count>
          </nz-form-control>
        </nz-form-item>
      </form>
      <!-- E body -->
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="primary" (click)="submitForm()">确定</button>
        <button nz-button nzType="default" (click)="handleCancel()">取消</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 新增 | 编辑 -->